<template>
  <div class="app-container">
    <el-form :rules="rules" ref="form" :model="form" label-width="120px" element-loading-text="Loading" v-loading="listLoading">
      <el-form-item label="PLC 类型">
        <el-input disabled placeholder="SIEMENS AG PLC"/>
      </el-form-item>
      <el-form-item label="DB 编号" prop="addressNumber">
        <el-input placeholder="请输入DB编号" v-bind="addressNumberChange()" v-model="form.addressNumber" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择数据类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="偏移量" prop="addressOffset">
        <el-input placeholder="请输入偏移量" v-model="form.addressOffset" />
      </el-form-item>
      <el-form-item label="S7 地址">
        <el-input disabled v-model="form.address" />
      </el-form-item>
      <el-form-item label="PLC" prop="plc">
        <el-select v-model="form.plc" placeholder="请选择所属PLC">
          <el-option
            v-for="item in PLCOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用/禁用 节点">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item label="读/写 操作" prop="rw">
        <el-select v-model="form.rw" placeholder="请选择操作">
          <el-option
            v-for="item in rwCheckOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="节点属性" prop="property">
        <el-checkbox-group v-model="form.property">
          <el-checkbox
            v-for="item in propertyCheckLists"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="描述">
        <el-input placeholder="随便写点什么吧" v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addNode } from '@/api/table'

export default {
  data() {
    return {
      listLoading: false,
      form: {
        addressNumber: '',
        addressOffset: '',
        type: '',
        address: '',
        plc: '',
        status: false,
        rw: [],
        desc: '',
        property: [],
        date: ''
      },
      typeOptions: [{
          value: 'Bool',
          label: 'Bool'
        }, {
          value: 'Byte',
          label: 'Byte'
        }, {
          value: 'Word',
          label: 'Word'
        }, {
          value: 'Int',
          label: 'Int'
        }, {
          value: 'DInt',
          label: 'DInt'
        },{
          value: 'DWord',
          label: 'DWord'
        },{
          value: 'Real',
          label: 'Real'
        }],
      PLCOptions: [{
        value: 'PLC_1',
        label: 'PLC_1'
      }, {
        value: 'PLC_2',
        label: 'PLC_2'
      }],
      rwCheckOptions:[{
        value: 'R',
        label: '可读'
      },{
        value: 'W',
        label: '可写'
      },{
        value: 'R/W',
        label: '可读/可写'
      }],
      propertyCheckLists:[{
        name: '属性1',
        label: '属性1'
      },{
        name: '属性2',
        label: '属性2'
      },{
        name: '属性3',
        label: '属性3'
      },{
        name: '属性4',
        label: '属性4'
      },{
        name: '属性5',
        label: '属性5'
      }],
      rules: {
        addressNumber: [
          { required: true, message: '请输入DB编号', trigger: 'change' },
          { min: 1, max: 9,  message: '无效长度', trigger: 'change' },
          { type: 'number' , message: '数据格式错误', trigger: 'change' ,transform: (value) => Number(value)}
        ],
        addressOffset: [
          { required: true, message: '请输入偏移量', trigger: 'change' },
          { min: 1, max: 9,  message: '无效长度', trigger: 'change' },
          { type: 'number' , message: '数据格式错误', trigger: 'change' ,transform: (value) => Number(value)}
        ],
        type: [
            { required: true, message: '请选择数据类型', trigger: 'blur' }
        ],
        plc: [
            { required: true, message: '请选择PLC', trigger: 'blur' }
        ],
        rw: [
            { required: true, message: '请选择操作类型', trigger: 'blur' }
        ],
        property: [
          { type: 'array', required: true, message: '请至少选择一个属性', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
      /**
     * date format
     */

    formatDate(date) {
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },


    submitForm(){

      this.listLoading = true
      //发送请求
      var data = this.form

      //set current time
      data.date = this.formatDate(new Date())

      //status
      if(data.status){  data.status = 'active'  }
      else { data.status = 'inactive' }

      this.timer = setInterval(() => {

        console.log(this.data)
        console.log(data)
        addNode(data).then(response => {
        console.log(response)

        this.listLoading = false
        clearInterval(this.timer);

        })
        console.log("Table定时器启动")
      }, 1 * 1000);


    },

    addressNumberChange(){
      console.log("change")
      this.form.address = "DB" + this.form.addressNumber + "," + this.form.type + this.form.addressOffset
    },


    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitForm()
          this.$message({
              type: 'success',
              message: '提交成功'
            });
        } else {
          this.$message({
              type: 'error',
              message: '数据验证失败'
            });
          return false;
        }
      });
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

